<template>
    <div class="tag-item">
        <span class="tag-label">{{ name }}</span>
        <span class="icon iconfont icon-a-biaoqianshanchu" @click="del"></span>
    </div>
</template>

<script lang="ts" setup>
defineProps({
    name: {
        type: String,
        default: '测试',
        require: true,
    }
});

const emit = defineEmits(['del']);

const del = () => {
    emit('del');
};
</script>

<style lang="scss" scoped>
.tag-item {
    height: 30px;
    line-height: 30px;
    padding: 0 12px;
    background: #fafafa;
    border-radius: 6px;
    margin-right: 10px;
    margin-bottom: 10px;
    font-size: 12px;
}

.icon-a-biaoqianshanchu {
    display: inline-block;
    color: #848484;
    font-size: 12px;
    transform: scale(0.67);
    margin-left: 8px;
}
</style>
